<template>
  <div>
    <!--  1.顶部导航-->
    <div style="margin-top: 3%">
      <van-nav-bar
          title="地图"
          left-text="返回"
          left-arrow
          @click-left="back()"
      />
    </div>
    <div id="dvmap">
    </div>
    <div>
      <div class="ts-mdd">
        <label style="margin-left: 15%">点击地图选择目的地</label>
      </div>
      <div class="dt-btn">
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="run()">
          路线规划
        </van-button>
      </div>
      <div class="dt-jwd">
        <p>目的地纬度：{{endnear.lat}}</p>
        <p>目的地经度：{{endnear.lng}}</p>
      </div>
<!--      <div style="margin-top: 20px">-->
<!--        <button @click="track()">今日轨迹</button>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
var map;
export default {
  name: "MapRunView",
  data(){
    return{
      point:{},
      near:{
        address: "",
        lat: "113.6576497308913",
        lng: "34.72739479647991"
      },
      endnear:{
        address: "",
        lat: "113.63141921",
        lng: "34.75343885"
      },
      // path : [{
      //   'lng': 113.63294309504033,
      //   'lat': 34.759682519653076
      // }, {
      //   'lng': 113.63366173944831,
      //   'lat': 34.75971217556552
      // }, {
      //   'lng': 113.63362580722792,
      //   'lat': 34.760394258584576
      // }, {
      //   'lng': 113.6343085194155,
      //   'lat': 34.760453569882706
      // }, {
      //   'lng': 113.6342725871951,
      //   'lat': 34.75360283062614
      // }, {
      //   'lng': 113.63141921,
      //   'lat': 34.75343885
      //   }],
      // maps:'',
      // pls:''
    }
  },
  mounted() {
    map = new BMap.Map("dvmap");
    // 创建地图实例
    this.point = new BMap.Point(113.6576497308913, 34.72739479647991);
    // 创建点坐标
    map.centerAndZoom(this.point, 16);
    var marker = new BMap.Marker(this.point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
    //地图 添加点击事件
    map.addEventListener("click", (e)=>{
      console.log(e.point.lng + ", " + e.point.lat);
      this.endnear.lat=e.point.lat;
      this.endnear.lng=e.point.lng;
    });
  },methods:{
    back(){
      history.back();
    },
    // track(){
    //   map.centerAndZoom(new BMapGL.Point(113.63294309504033,34.759682519653076), 17);  // 初始化地图,设置中心点坐标和地图级别
    //   map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //
    //   var point = [];
    //   for (var i = 0; i < this.path.length; i++) {
    //     point.push(new BMapGL.Point(this.path[i].lng, this.path[i].lat));
    //   }
    //   var pl = new BMapGL.Polyline(point);
    //
    //   this.maps = map
    //   this.pls = pl
    //   setTimeout(this.start, 3000);
    //
    //   map.setHeading(64.5);
    //   map.setTilt(73);
    //   // 创建个轨迹动画对象，并配置参数
    //   var trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {
    //     overallView: true,
    //     tilt: 30,
    //     duration: 20000,
    //     delay: 300
    //   });
    //   trackAni.start();
    // },
    run(){
      map.centerAndZoom(new BMap.Point(113.6576497308913, 34.72739479647991), 14);
      var walk = new BMap.WalkingRoute(map, {
        renderOptions: {map: map}
      });
      var start = new BMap.Point(113.6576497308913, 34.72739479647991);
      var end = new BMap.Point(this.endnear.lng, this.endnear.lat);
      walk.search(start, end);
    },
    fj(){
      //绘制圆
      var circle = new BMap.Circle(
          this.point,
          3000,
          {strokeColor:"red", strokeWeight:1, strokeOpacity:0.8,fillOpacity:0.1}
      );
      map.addOverlay(circle);
      //实现附近的健身房的查询
      var obj={
        lat:this.point.lat,
        lng: this.point.lng,
        address:this.near.address,
        radius: 3000
      }
      this.axios.post("/api/near/search.do",obj).then(r=>{
        if(r.data.code==200){
          for(var i in r.data.data){
            var p = new BMap.Point(r.data.data[i].lng, r.data.data[i].lat);
            var marker = new BMap.Marker(p);        // 创建标注
            map.addOverlay(marker);                 // 将标注添加到地图中
            marker.addEventListener("click", function(){
              alert("您点击了标注");
            });
          }
        }
      })
    }
  }
}
</script>

<style scoped>
#dvmap{
  width: 100%;
  height: 350px;
  border-radius: 40px;
}
.ts-mdd{
 margin-top: 30px;
  float: left;
  font-size: 20px;
  font-weight: bold;
  width: 60%;
}
.dt-btn{
  margin-top: 20px;
  float: left;
  width: 40%;
}
.dt-jwd{
  margin-top: 10px;
  float: left;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
</style>
